<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" :label-width="null" @add="onAdd" showAddBtn
            :query-props="{expandAble: false}">
    <template v-slot:form>
      <el-form-item label="资源名称">
        <el-input v-model="model.name" placeholder="资源名称" clearable></el-input>
      </el-form-item>
    </template>

    <template v-slot:tools>
      <el-button type="primary" size="mini" icon="el-icon-edit" @click="onEditGroup">编辑分组</el-button>
    </template>

    <template v-slot:url="{row}">
      <img class="list-img" :src="row.url" preview="1" :preview-text="row.name"/>
    </template>

    <template v-slot:ctrl="scope">
      <sys-ctrl :btns="getBtns(scope.row)" :scope="scope"></sys-ctrl>
    </template>

  </sys-page>
</template>

<script>
import {postImageList, postImageDelete} from "@/api/image"
import {getUserFromCache} from "@/helper/utils";
import edit from './edit'
import groupEdit from './group-edit'

function getColumns() {
  return [
    {type: 'selection', align: 'center'},
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'name', label: '资源名称', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'fileName', label: '文件名', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'url', labe: '文件类型', align: 'center', minWidth: 150, showOverflowTooltip: false, display: true},
    {prop: 'groupName', label: '分组', align: 'center', minWidth: 100, showOverflowTooltip: true, display: true},
    {prop: 'createTime', label: '创建时间', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'createBy', label: '创建人', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'ctrl', label: '操作', width: 210, fixed: 'right', align: 'center'}
  ]
}

export default {
  name: 'image-list',
  cnName: 'image',
  data() {
    return {
      model: {
        name: ''
      },
      columns: getColumns(),
      btns: []
    }
  },
  methods: {
    async loader(model) {
      const res = await postImageList(model)
      return res
    },
    onAdd() {
      this.$refs.page.setDialog({
        title: '新增数据源',
        comp: edit
      })
    },
    onEdit(row) {
      const {id} = row
      this.$refs.page.setDialog({
        title: '修改数据源',
        height: '50%',
        comp: edit,
        props: {
          id: id
        }
      })
    },
    onDelete(row) {
      this.doDelete([row.id])
    },
    doDelete(ids) {
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postImageDelete(ids).then(_ => {
          this.$notify.success('删除成功!')
          this.$refs.page.reload()
        })
      })
    },
    onEditGroup() {
      this.$refs.page.setDialog({
        title: '编辑分组',
        height: '40%',
        width: '50%',
        comp: groupEdit,
        props: {
        }
      })
    },
    getBtns(row) {
      const btns = [
        {
          label: '编辑',
          disabled: row.createId !== this.currentUser.userId,
          click: row => {
            this.onEdit(row)
          }
        },
        {
          label: '删除',
          disabled: row.createId !== this.currentUser.userId,
          click: row => {
            this.onDelete(row)
          }
        }
      ]

      return btns
    }
  },
  computed: {
    currentUser() {
      return getUserFromCache().user
    }
  }
}
</script>

<style lang="less" scoped>
.list-img {
  max-height: 60px;
  max-width: 100px;
  cursor: pointer;
}
</style>
